import React, { FC } from 'react'
import { useDispatch } from 'react-redux'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
import { getComponentConfByType } from '../../../components/QuestionComponents'
import { QuestionTitlePropsType } from '../../../components/QuestionComponents/QuestionTitle/interface'
import { changeComponentProps } from '../../../store/componetnsReducer'
const NoProp: FC = () => {
  return <div style={{ textAlign: 'center' }}>未选中组件</div>
}
const ComponentProps: FC = () => {
  const dispatch = useDispatch()
  const { selectedCopmonent } = useGetComponentInfo()
  function changeProps(newProps: QuestionTitlePropsType) {
    if (!selectedCopmonent) return
    const { fe_id } = selectedCopmonent
    console.log(newProps, 'newProps')
    dispatch(changeComponentProps({ fe_id, newProps: newProps }))
  }
  if (!selectedCopmonent) return <NoProp />
  const { type, props, isLocked, isHidden } = selectedCopmonent
  const componentConf = getComponentConfByType(type)
  if (!componentConf) return <NoProp />
  return (
    <componentConf.PropsComponent
      {...props}
      onChange={changeProps}
      disabled={isLocked || isHidden}
    />
  )
}
export default ComponentProps
